<template>
  <div class="knowledge-element">
    <template ref="headerRef">
      <HeaderRefComponent v-if="headerShow" :get-knowledge="getKnowledge" @search="handle($event.type, $event.value)"/>
    </template>
    <div class="knowledge-tree" >
      <KnowledgeTreeComponent :subjectId="subjectId" ref="knowledgeRef"/>
    </div>  
    <div class="drag-div" @mousedown="drapMouse($event)"></div> 
    <div class='content' ref="content">
      <ContentComponent :choice="choice" :on-add-change="onAddChange" :disabled-list="disabledList" :subjectId="subjectId" ref="contentRef"/>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'
import HeaderRefComponent from './components/header.vue';
import KnowledgeTreeComponent from './components/knowledge-tree.vue';
import ContentComponent from './components/content.vue';
import { emitter } from '$';
import { ElMessage } from 'element-plus'

export default{
  props: {
    headerShow: {
      type: Boolean,
      default: () => true
    },
    choice: {
      type: Boolean,
      default: () => false
    },
    disabledList: {
      type: Array,
      default: () => []
    },
    subjectId: String
  },
  components: { HeaderRefComponent, KnowledgeTreeComponent, ContentComponent },
  setup(props, { emit }) {
    let headerRef = ref()
    let knowledgeRef = ref();
    onMounted(() => {
      emitter.emit('slot', headerRef)
    });
    const getKnowledge = () => new Promise((resolve, reject) => {
      try {
        let nodes = knowledgeRef.value.knowledgeRef.getCheckedNodes(true);
        !nodes.length && ElMessage.warning('请在左侧选择一个知识点开始上传吧~！')
        nodes.length ? resolve(nodes) : reject()
      } catch (error) {
        ElMessage.warning('请在左侧选择一个知识点开始上传吧~！');
        reject()
      }
    })
    const onAddChange = (list) => emit('add-change', list);
    let max_width = 500,	min_width = 280, mouse_x = 0
    let content: any = document.getElementsByClassName('content')
    let knowledgeTree: any = document.getElementsByClassName('knowledge-tree')

    const mouseMove = (e) => {
      let left_width = e.clientX - mouse_x;
      left_width = left_width < min_width ? min_width : left_width;
			left_width = left_width > max_width ? max_width : left_width;
			knowledgeTree[0].style.width = left_width + 'px';
			content[0].style.left = left_width + 'px';
    }
    const mouseUp = (e) => {
      document.onmousemove = null;
			document.onmouseup = null;
			localStorage.setItem('sliderWidth', knowledgeTree[0].style.width)
    }
    let history_width = localStorage.getItem('sliderWidth');
    if (history_width) {
      setTimeout(() => {
        knowledgeTree[0].style.width = history_width;
        content[0].style.left = history_width;
      }, 170)
    }
    const drapMouse = (e) => {
      e.preventDefault();
      mouse_x = e.clientX - knowledgeTree[0].offsetWidth - 80;
      document.onmousemove = mouseMove;
      document.onmouseup = mouseUp;
    }
    let contentRef = ref();
    const handle = (key, val) => { contentRef.value.params[key] = val; contentRef.value.list.request(); }
    return { headerRef, onAddChange, knowledgeRef, getKnowledge, content, drapMouse, mouseMove, mouseUp, handle, contentRef }
  }
}
</script>

<style lang='scss' scoped>
  .knowledge-element{
    display: flex;
    &, & > div {
      height: 100%;
      overflow: auto;
    }
    .knowledge-tree {
      background: #fff;
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      min-width: 280px;
    }
    .content{
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 6px;
    }
    .drag-div{
      height: 100%;
      width: 20px;
      cursor: col-resize;
      &:hover {
        background: #EFF2F5;
      }
    }    
  }
  
</style>